import { useIntersectionObserver } from '@vueuse/core'
import defaltImg from '@/assets/images/load.gif'
// 定义全局指令
const myDiretive = {
  install (app) {
    app.directive('imgLazy', {
      mounted (el, binding) {
        el.src = defaltImg
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            if (isIntersecting) {
              stop()
              el.src = binding.value
              el.onerror = function () {
                el.src = defaltImg
              }
            }
          },
          { threshold: 0 })
      }
    })
  }
}
export default myDiretive
